<template>
	<view class="store-list-page">
		<view class="top-bar">
			<u-dropdown ref="uDropdown">
				<u-dropdown-item :title="value1.label">
					<view class="slot-content" style="background-color: #FFFFFF;">
						<scroll-view scroll-y="true" style="max-height: 100vh;">
							<view class="option1-item" v-for="item in options1" :key="item.value"
								:class="{'active':item.value == value1.value}" @tap="dropItemChange(1,item.value)">
								{{item.label}}
								<u-icon v-show="item.value == value1.value" name="checkbox-mark"></u-icon>
							</view>
						</scroll-view>
					</view>
				</u-dropdown-item>
				<u-dropdown-item @change="e=>dropItemChange(2,e)" :title="value2.label" :value="value2.value"
					:options="options2"></u-dropdown-item>
				<u-dropdown-item :title="value3.label">
					<view class="condition-box">
						<view class="condition-list">
							<view class="item" :class="item.value === value3.value ? 'active' : ''" @tap="value3=item"
								v-for="(item, index) in options3" :key="index">
								{{item.label}}
							</view>
						</view>
						<view class="btn-box">
							<view class="btn reset-btn" @tap="closeDropdown">重置</view>
							<view class="btn confirm-btn" @tap="closeDropdown(true)">确定</view>
						</view>
					</view>
				</u-dropdown-item>
			</u-dropdown>
		</view>

		<five-level-address style="margin-top: 10rpx;" @input="clearList();getBestListFun(null);"
			v-model="fiveLevelAddress"></five-level-address>

		<view class="position-bar">
			<view class="left">
				<u-icon name="map" color="#525252" size="36"></u-icon>
				<text class="text">{{location.cityname}}</text>
			</view>
			<view class="right" @tap="resetLocation()">
				<u-icon name="reload" color="#1E8AF4" size="30"></u-icon>
				<text class="text">刷新</text>
			</view>
		</view>

		<view class="main">
			<view class="item" v-for="item in dataList" :key="item.id" @tap="navigat(item)">
				<view class="top-box">
					<view class="image-box">
						<image :src="item.logo" mode="aspectFill" class="img"></image>
					</view>
					<view class="info-box">
						<view class="top">
							<view class="row">
								<view class="bold mr20">
									{{item.name}}
								</view>
								<view class="tag" :class="[item.type==0?'tag-1':'tag-2']">{{item.lxname}}</view>
							</view>
							<u-icon name="arrow-right" color="#707070" size="30"></u-icon>
						</view>
						<view class="title">{{item.address}}</view>
					</view>
				</view>
				<view class="footer-box">
					<view class="value-box">
						<text class="label">订单总数</text>
						<text class="no">{{item.order_num}}</text>
					</view>
					<view class="distance">距您{{item.juli}}</view>
				</view>
			</view>

			<loading-footer :status="status"></loading-footer>
		</view>
	</view>
</template>

<script>
	import {
		loadingType
	} from '@/utils/type'
	import {
		loadingFun
	} from '../../../utils/tools'
	import {
		getfwwdList,
		getCountyList,
		getWdType,
	} from '../../../api/lease'

	const options2List = [{
		value: 0,
		label: '默认排序'
	}, {
		value: 'juli',
		label: '附近优先'
	}, {
		value: 'sale',
		label: '销量优先'
	}]
	const options1List = [{
		value: 0,
		label: '全部'
	}]
	const options3List = [{
		value: 0,
		label: '全部'
	}]

	const nameMap = {
		'0': 'province_id',
		'1': 'city_id',
		'2': 'county_id',
		'3': 'township_id',
		'4': 'village_id',
	}

	export default {
		data() {
			return {
				value: '',
				status: loadingType.LOADING,
				value1: options1List[0],
				options1: options1List,
				value2: options2List[0],
				options2: options2List,
				value3: options3List[0],
				options3: options3List,
				location: {
					lat: null,
					lng: null,
					cityname: null,
				},
				citys_id: null,
				dataList: [],
				fiveLevelAddress: null
			}
		},
		async onLoad(options) {
			this.resetLocation(() => {
				this.getCountyList();
			});
			getWdType().then(res => {
				if (res.code != 1) return uni.showToast({
					icon: 'none',
					title: res.msg
				})
				this.options3 = [...options3List, ...res.data.map(v => ({
					label: v.name,
					value: v.id,
				}))]
			})
		},
		async onShow() {

		},
		onReachBottom() {
			this.getBestListFun();
		},
		methods: {
			navigat(item) {
				this.$store.commit('SETAGENTINFO', item)
				uni.navigateTo({
					url: `/package_store/pages/store_detail/index?id=${item.id}&lat=${this.location.lat}&lng=${this.location.lng}`
				})
			},
			/**
			 * 重设地址
			 * @param {*} [callback=undefined] 成功回调
			 */
			resetLocation(callback = undefined) {
				let _this = this;
				this.getLocation((data) => {
					_this.location.lat = data.lat;
					_this.location.lng = data.lng;
					_this.location.cityname = data.CityName;
					_this.location.city = data.city;
					_this.clearList()
					_this.getBestListFun(() => {
						if (_this.dataList.length > 0)
							_this.citys_id = _this.dataList[0].city
						if (callback) callback();
					});
				});
			},
			getCountyList(callback = null) {
				getCountyList({
					city_id: this.citys_id
				}).then(res => {
					if (res.code != 1) return uni.showToast({
						icon: "none",
						title: res.msg
					})
					options1List[0].label = this.location.city;
					this.options1 = [...options1List, ...res.data.map(v => ({
						label: v.city_name + "(" + v.num + ")",
						value: v.id,
					}))]
					if (callback) callback();
				})
			},
			clearList() {
				this.page = 1;
				this.status = loadingType.LOADING;
				this.dataList = [];
			},
			async getBestListFun(callback = null) {
				let {
					page,
					dataList,
					status
				} = this
				let address = {};
				if (this.fiveLevelAddress && this.fiveLevelAddress.length > 0) {
					for (let i = 0; i < this.fiveLevelAddress.length; i++) {
						const item = this.fiveLevelAddress[i]
						if (item) {
							address[nameMap[i]] = item.value;
						} else {
							break;
						}
					}
				}
				const data = await loadingFun(getfwwdList, page, dataList, status, {
					lng: this.location.lng,
					lat: this.location.lat,
					order: this.value2.value,
					citys_id: this.value1.value,
					type_id: this.value3.value,
					...address
				})
				if (!data) return
				this.page = data.page
				this.dataList = data.dataList
				this.status = data.status
				if (callback) callback();
			},
			dropItemChange(index, e) {
				if (index == 1)
					this.fiveLevelAddress = new Array(5).fill(null);
				this['value' + index] = this['options' + index].find(v => v.value == e);
				this.clearList()
				this.getBestListFun();
				if (index == 1)
					this.$refs.uDropdown.close();
			},
			closeDropdown(reload = false) {
				if (!reload) this.value3 = this.options3[0];
				this.$refs.uDropdown.close();
				this.clearList()
				this.getBestListFun();
			}
		},
	}
</script>

<style lang="scss">
	@import "index.scss";

	.option1-item {
		display: flex;
		height: 60px;
		border-bottom: 1px solid #eee;
		justify-content: space-between;
		padding: 0 30rpx;
		align-items: center;

		&.active {
			color: var(--primary-color);
		}
	}
</style>